<template>
    <div class="slide-container">
        <div class="slide-content">
            <div class="slide-item" v-for="(item, i) in list" :style="{ backgroundImage: 'url(' + item.img + ')' }">
                <div class="slide-text">
                    <div class="slide-name" v-html="item.name"></div>
                    <div class="slide-desc" v-html="item.desc"></div>
                </div>
            </div>
        </div>
        <div class="slide-buttons">
            <button class="slide-prev" @click="backward"></button>
            <button class="slide-next" @click="forward"></button>
        </div>
    </div>
</template>

<script>
export default {
    name: "Slide",
    props: ["slideList"],
    data() {
        return {
            list: [
                {
                    img: "/img/style/lake.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/simiao.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/waterfall.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/zhongta.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/lake.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/simiao.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/waterfall.jpg",
                    name: "Title",
                    desc: "hello world",
                },
                {
                    img: "/img/style/zhongta.jpg",
                    name: "Title",
                    desc: "hello world",
                },
            ],
        }
    },
    computed: {},
    methods: {
        //向前
        forward() {
            //被插入元素已经在lists中时，只会将该元素移动到新位置所以不需要删除原来的元素
            let lists = this.$el.parentElement.querySelectorAll(".slide-item");
            this.$el.parentElement.querySelector(".slide-content").prepend(lists[lists.length - 1]);
        },
        //向后
        backward() {
            //被插入元素已经在lists中时，只会将该元素移动到新位置所以不需要删除原来的元素
            let lists = this.$el.parentElement.querySelectorAll(".slide-item");
            this.$el.parentElement.querySelector(".slide-content").appendChild(lists[0]);
        },
    },
    created() {
        if (this.$props.slideList) {
            this.list = this.$props.slideList;
        }
    },
    mounted() {
        
    }
}
</script>

<style>
@import url("@/assets/css/style/slide.css");
</style>